<template>
  <div class="outCompoent">
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>

import {
  seriousDevice,
  opInfoQueryBatch

} from "@/api/index";

export default {
  props: {
    // parentMethod: {
    //   type: Function,
    //   required: true,
    // },
    message: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      map: undefined,
      psrmap: undefined,
      flashArray: [],
      sDparams: {
        // 设备类型 1312-主变, 0408-馈线
        devType: "1312",
      },
      // powerManageGridMap:null,
    };
  },

  created() {
    this.useMyseriousDevice()
  },
  methods: {
    // 全天最严重设备
    useMyseriousDevice() {
      // 接口部分
      seriousDevice(this.sDparams).then(res => {
        if (res.code !== 200) return

        console.log(res.data, '看一眼返回值');

        let myArray = []
        res.data.forEach(it => {
          myArray.push(it.gs_id)
        });

        let Params =
        {
          "classify": "02",
          "deviceType": "zf01",
          "deviceIdList": myArray
        }

        // console.log(myArray,"看op互联的返回值");
        opInfoQueryBatch(Params).then(res => {
          if (res.code !== 200) return
          let newAarray = []
          res.data.forEach(it => {
            newAarray.push(it.psrId)
          })
          console.log(res.data, "看op互联的返回值");
          this.flashArray = newAarray
          
          console.log(this.flashArray, "看this.flashArray互联的返回值");
          this.startAnimation()
        })
      })
    },

    startAnimation() {
      const DeviceQuery = new narimap.ResourceQuery.DeviceQuery();

      const id = [
        {
          devId: "10197",
          devType: "zf01",
          provinceId: "ff80808149f52e24014a039871840007",
          distribution: Number(1), // 主网是 1 配网是 0
        },
      ];
      const flashParmes = {
        mode: "opacity",
        times: 0,
        speed: 1,
        minopacity: 0,
        reverseColor: "green",
      };
      console.log("查询参数设备ID:\n" + JSON.stringify(id));

      // 根据设备ID查询设备
      DeviceQuery.queryDeviceByIds(
        {
          devIds: id,
        },
        (res) => {
          if (res.isSuccess()) {
            console.log(res.toList(), "0000000000");
            console.log("查询结果:", res);
            console.log('测试执行到了哪一步') // 只有zf01这一种类型可以闪烁
            let flashArray = ['10197', '154178365']
            // let array = ['147047554', '11908']
            this.psrmap.flyToDevices(id);  
            let array = ['10197' , '154178365']
   
            this.psrmap.highlightDevices(flashArray, {color:"yellow",flash:flashParmes} );

            
            console.log(array , '用来闪光的数组');
            console.log(this.flashArray, '看一眼这里的闪烁值')
          } else {
            alert(res.msg);
          }
        },
        (err) => {
          // do something
        }
      );
    },


    changeDiqvID() {
      let periD = sessionStorage.getItem("DEVID");
      let ids = [
        {
          devId: periD,
          devType: sessionStorage.getItem('op_deviceType'),
          distribution: 1,
        },
      ];
      console.log(ids, '看ids')

      this.psrmap.flyToDevices(ids, {
        heightlight: true,
        color: "#FFFF00",
      });

      // alert('世界')
    },
    ceshiMethods() {
      alert("世界你好");

    },
    useParent() {
      this.$emit("ChildData", "Hello from child");

      // console.log(this.message , '看数据');

      // alert(this.message)
      // this.parentMethod()
    },
    initMap(styleurl) {
      // this.map && this.map.remove();
      this.map = new narimap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: styleurl,
        // 默认缩放层级
        zoom: 7,
        // 地图中心点
        center: [119.05259089995932, 31.73433342834534], // [119.45259089995932, 32.93433342834534],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
        fullExtent: narimap.Config.examples.fullExtent,
      });
      this.map.on("load", () => {
        //添加电网图层
        this.psrmap = new narimap.PSRMap(this.map);
        // this.psrmap = new narimap.PSRMap(this.map, option);
        this.psrmap.addPSR();
        //添加电网要素点击事件
        this.psrmap.on("click", (features) => {
          //  console.log(features, features.grid.orgId  , '999999999');
        });
        this.psrmap.on("load", () => {
          var query; // 这边就是搜索框的代码
          query = new WebGIS.Components.Query(this.map);
          query.init(this.map.getContainer());
          const queryBox = this.$el.querySelector("#queryBoxWrap");
          queryBox.style.left = "80px";
          if (!window.__POWERED_BY_WUJIE__) {
            queryBox.style.left = "300px";
            queryBox.style.top = "12px";
          }
          // 设置省份的机构ID（本示例为江苏）
          // 在总部环境下如果不设置无法查询配网数据
          query.setQueryOrgId("ff8080814a616f0f014b38b062e0050e");
          query.on("poi-item-click", (eventName, data) => {
            console.log("POI点击事件", data);
          });
          query.on("res-item-click", (eventName, data) => {
            console.log("设备点击事件", data);
          });
        });
      });
      this.map.once("load", () => {
        this.powerManageGridMap = new narimap.ManageGrid.PowerManageGridMap(this.map);
        this.powerManageGridMap.init(
          {
            theme: "light",
            levels: {
              province: {
                enable: false,
              },
              city: {
                minzoom: 5,
                maxzoom: 24,
                outline: {
                  paint: {
                    "line-color": "#07b9a1",
                    "line-width": 2,
                  },
                },
                fill: {
                  paint: {
                    "fill-color": "rgb(134,134,133)",
                    "fill-opacity": 0.24,
                  },
                },
                highLight: {
                  type: "all",
                  fill: {
                    paint: {
                      "fill-color": "#3b6d5f",
                      "fill-opacity": 0.2,
                    },
                  },
                  outline: {
                    paint: {
                      "line-color": "#07b9a1",
                      "line-width": 5,
                    },
                  },
                },
                hover: {
                  enable: true,
                  type: "all",
                  fill: {
                    enable: false,
                    paint: {
                      "fill-color": "#3b6d5f",
                      "fill-opacity": 0.2,
                    },
                  },
                  outline: {
                    enable: true,
                    paint: {
                      "line-color": "#07b9a1",
                      "line-width": 4,
                    },
                  },
                },
              },
              //乡镇级别不显示
              country: {
                enable: false,
              },
              //班组级别不显示
              depart: {
                enable: false,
              },
            },
          },
          {
            initOrgIds: ["ff8080814a616f0f014b38b062e0050e"],
            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
            theme: "admin_background",
            cascade: true,
          }
        );

        this.powerManageGridMap.on("click", function (e) {
          console.log(e);
          console.log(this, "ddddd");

          this.highLight([e.grid.orgId]);
        });
      });

      this.map.on("click", (val) => {
        console.log(val, "看一眼val的值");
      });
    },

    initMymap() {
      this.$nextTick(() => {
        var that = this;


        narimap.Require(
          [
            "PSRMap",
            "components.Query",
            "components.ThematicLayerCtl",
            "Thematic",
          ],
          () => {
            if (narimap) {
              narimap.Config.styles.sjBase =
                "aegis://styles/aegis/StreetsLight-v2"; // 修改了地图的风格
            }
            if (narimap.Config.examples.notlogin) {
              //默认打开暗色系地图
              alert("世界1");
              that.initMap(narimap.Config.styles.base);
            } else {
              console.log(narimap.Config, "看地图");

              //电网GIS地图服务登录
              narimap.SGAuth.login()
                .then(function (result) {
                  // alert('渲染了地图')

                  if (result.success) {
                    console.log("登录成功");
                  } else {
                    console.log("登录失败", result);
                  }
                  //默认打开暗色系地图
                  that.initMap(narimap.Config.styles.sjBase);
                  const div1 = that.$el.querySelector(
                    ".sgmap-ctrl-bottom-left"
                  );
                  const div2 = that.$el.querySelector(
                    ".sgmap-ctrl-bottom-right"
                  );
                  div1.style.display = "none"; //隐藏地图左下组件
                  div2.style.display = "none"; //隐藏地图右下组件
                })
                .catch((err) => {
                  console.log("错误", err);
                });
            }
          }
        );
      });
    },

    destoryMap() {
      map.remove();
      this.map = null;

      // alert('地图已经销毁')
    },
  },

  mounted() {
    // 电网一张图
    this.initMymap();
  },

  // beforeDestroy() {
  //   this.destoryMap();
  // },
};
</script>

<style lang="scss" scoped>
.outCompoent {
  width: 100%;
  height: 100%;

  // background-color: red;

  .titleBox {}
}
</style>
